<template>

    <div class="pm_menu_item">
    <button
        @click="clickHandle"
        :class="{ 'is-active': isActive, blockquote: true }"
        :title="label"
    >
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zeditor-blockquote"></use>
        </svg>
    </button>
    </div>
</template>

<script>

import {m_blockquote} from "./i18n.js"

export default {
    name:'menu_blockquote',
    components: {
    },

    data() {
        return {
            label:m_blockquote
        };
    },
    props: ["editor"],
    watch: {
    },
    mounted() {
    },
    beforeUnmount() {
    },
    computed: {
        isActive() {
            console.log('blockquote',this.editor.isFocused, this.editor.isActive('blockquote'))
            return this.editor.isFocused && this.editor.isActive('blockquote')
        }
    },
    methods: {
        clickHandle(){
            this.editor.chain().focus().toggleBlockquote().run();
        }
    },
};
</script>

<style lang="scss" scoped>
</style>
